<template>
  <div class="sizeList">
    <el-table
      :data="sizeList"
      border
      style="width: 244px"
      height="370px"
      :header-cell-style="{ background: '#f4f4f4', padding: 0, height: '40px' }"
      :cell-style="{ padding: 0, height: '36px' }"
    >
      <el-table-column prop="kind" label="种类" width="60"> </el-table-column>
      <el-table-column prop="size" label="尺码" width="80"> </el-table-column>
      <el-table-column prop="no" label="编号"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSize } from '../../../../network/size'

export default {
  props: {
    // 直接选中的是后端返回的尺码的类型（item,不是对象，是number）
    sizeKindId: '',
    title: [String]
  },
  data() {
    return {
      sizeList: []
    }
  },
  created() {
    // 目的是解决watch不能一个完成
    this.getSize_a()
  },
  methods: {
    getSize_a() {
      // console.log(this.sizeKindId, '刚开始')
      if (this.title === '新建' && this.sizeKindId === '') return
      getSize({ kind: this.sizeKindId, limit: 99999 }).then((res) => {
        this.sizeList = res.data.data
        this.sizeList.sort((a, b) => {
          return a.no.localeCompare(b.no)
        })
      })
    }
  },
  // 主要如果是新建的话
  watch: {
    sizeKindId(a, b) {
      // console.log(a)
      getSize({ kind: a, limit: 99999 }).then((res) => {
        this.sizeList = res.data.data
        this.sizeList.sort((a, b) => {
          return a.no.localeCompare(b.no)
        })
      })
    }
  }

  // watch: {
  //   sizeKindId: {
  //     handler(a, b) {
  //       if (this.title === '新建') {
  //         getSize({ kind: a, limit: 99999 }).then((res) => {
  //           this.sizeList = res.data.data
  //           this.sizeList.sort((a, b) => {
  //             return a.no.localeCompare(b.no)
  //           })
  //         })
  //       }
  //       if (this.title === '编辑') {
  //         if (a !== b) {
  //           getSize({ kind: a, limit: 99999 }).then((res) => {
  //             this.sizeList = res.data.data
  //             this.sizeList.sort((a, b) => {
  //               return a.no.localeCompare(b.no)
  //             })
  //           })
  //         }
  //       }
  //     },
  //     immediate: true
  //   }
  // }
}
</script>
